<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心 - 单词学习应用</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="../css/main.css">
</head>
<body>
    <div class="app-container">
        <div class="statusbar"></div>
        
        <div class="app-content">
            <!-- 个人资料头部 -->
            <div class="flex justify-between items-center mb-6">
                <h1 class="app-title">个人中心</h1>
                <button id="theme-toggle" class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center text-gray-600">
                    <i class="fas fa-moon"></i>
                </button>
            </div>
            
            <!-- 用户资料卡片 -->
            <div class="card p-5 mb-6">
                <div class="flex items-center">
                    <div class="w-20 h-20 rounded-full bg-blue-100 overflow-hidden mr-4">
                        <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" class="w-full h-full object-cover">
                    </div>
                    
                    <div>
                        <h2 class="font-bold text-lg text-gray-800">李小明</h2>
                        <p class="text-gray-500 text-sm">单词学习达人</p>
                        <div class="flex items-center mt-2">
                            <span class="badge badge-primary mr-2">Lv.5</span>
                            <div class="text-xs text-gray-500">积分: 3250</div>
                        </div>
                    </div>
                    
                    <div class="ml-auto">
                        <a href="settings.html" class="text-gray-400">
                            <i class="fas fa-cog text-xl"></i>
                        </a>
                    </div>
                </div>
                
                <div class="mt-4 pt-4 border-t border-gray-100">
                    <div class="flex justify-between">
                        <div class="text-center">
                            <div class="font-bold text-gray-800">15</div>
                            <div class="text-xs text-gray-500">学习天数</div>
                        </div>
                        
                        <div class="text-center">
                            <div class="font-bold text-gray-800">4356</div>
                            <div class="text-xs text-gray-500">已学单词</div>
                        </div>
                        
                        <div class="text-center">
                            <div class="font-bold text-gray-800">2854</div>
                            <div class="text-xs text-gray-500">已掌握</div>
                        </div>
                    </div>
                </div>
            </div>
            
            <!-- 功能菜单 -->
            <div class="card mb-6">
                <a href="progress.html" class="list-item">
                    <div class="list-item-icon">
                        <i class="fas fa-chart-line"></i>
                    </div>
                    <div class="list-item-content">
                        <div class="list-item-title">学习数据</div>
                        <div class="list-item-subtitle">查看你的学习进度和统计</div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
                
                <a href="#" class="list-item">
                    <div class="list-item-icon">
                        <i class="fas fa-star"></i>
                    </div>
                    <div class="list-item-content">
                        <div class="list-item-title">收藏单词</div>
                        <div class="list-item-subtitle">查看你收藏的所有单词</div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
                
                <a href="#" class="list-item">
                    <div class="list-item-icon">
                        <i class="fas fa-history"></i>
                    </div>
                    <div class="list-item-content">
                        <div class="list-item-title">学习历史</div>
                        <div class="list-item-subtitle">查看过去的学习记录</div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
                
                <a href="#" class="list-item">
                    <div class="list-item-icon">
                        <i class="fas fa-trophy"></i>
                    </div>
                    <div class="list-item-content">
                        <div class="list-item-title">成就徽章</div>
                        <div class="list-item-subtitle">已获得9个成就</div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
            </div>
            
            <!-- 社区排行榜 -->
            <h2 class="font-semibold text-lg mb-4">学习排行榜</h2>
            
            <div class="card mb-6">
                <div class="p-4 border-b border-gray-100">
                    <div class="flex justify-between items-center mb-4">
                        <h3 class="font-medium text-gray-800">本周排名</h3>
                        <a href="#" class="text-xs text-blue-500">查看更多</a>
                    </div>
                    
                    <div class="space-y-3">
                        <div class="flex items-center">
                            <div class="w-7 h-7 rounded-full bg-yellow-500 text-white flex items-center justify-center text-xs font-bold mr-3">
                                1
                            </div>
                            <div class="w-8 h-8 rounded-full overflow-hidden mr-3">
                                <img src="https://randomuser.me/api/portraits/men/32.jpg" alt="用户头像" class="w-full h-full object-cover">
                            </div>
                            <div class="flex-1">
                                <div class="font-medium text-gray-800">张三</div>
                                <div class="text-xs text-gray-500">已学习 568 词</div>
                            </div>
                            <div class="text-sm font-bold text-gray-800">
                                5680分
                            </div>
                        </div>
                        
                        <div class="flex items-center">
                            <div class="w-7 h-7 rounded-full bg-gray-300 text-white flex items-center justify-center text-xs font-bold mr-3">
                                2
                            </div>
                            <div class="w-8 h-8 rounded-full overflow-hidden mr-3">
                                <img src="https://randomuser.me/api/portraits/women/55.jpg" alt="用户头像" class="w-full h-full object-cover">
                            </div>
                            <div class="flex-1">
                                <div class="font-medium text-gray-800">李四</div>
                                <div class="text-xs text-gray-500">已学习 523 词</div>
                            </div>
                            <div class="text-sm font-bold text-gray-800">
                                5230分
                            </div>
                        </div>
                        
                        <div class="flex items-center bg-blue-50 p-2 rounded-lg">
                            <div class="w-7 h-7 rounded-full bg-blue-500 text-white flex items-center justify-center text-xs font-bold mr-3">
                                5
                            </div>
                            <div class="w-8 h-8 rounded-full overflow-hidden mr-3">
                                <img src="https://randomuser.me/api/portraits/women/44.jpg" alt="用户头像" class="w-full h-full object-cover">
                            </div>
                            <div class="flex-1">
                                <div class="font-medium text-gray-800">李小明 (你)</div>
                                <div class="text-xs text-gray-500">已学习 325 词</div>
                            </div>
                            <div class="text-sm font-bold text-gray-800">
                                3250分
                            </div>
                        </div>
                    </div>
                </div>
                
                <div class="p-4">
                    <a href="#" class="btn w-full text-center">
                        <i class="fas fa-users mr-2"></i>
                        邀请好友一起学习
                    </a>
                </div>
            </div>
            
            <!-- 其他功能 -->
            <div class="card">
                <a href="settings.html" class="list-item">
                    <div class="list-item-icon">
                        <i class="fas fa-cog"></i>
                    </div>
                    <div class="list-item-content">
                        <div class="list-item-title">设置</div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
                
                <a href="#" class="list-item">
                    <div class="list-item-icon">
                        <i class="fas fa-question-circle"></i>
                    </div>
                    <div class="list-item-content">
                        <div class="list-item-title">帮助与反馈</div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
                
                <a href="#" class="list-item">
                    <div class="list-item-icon">
                        <i class="fas fa-info-circle"></i>
                    </div>
                    <div class="list-item-content">
                        <div class="list-item-title">关于我们</div>
                    </div>
                    <i class="fas fa-chevron-right text-gray-400"></i>
                </a>
            </div>
        </div>
        
        <div class="navbar"></div>
    </div>
    
    <script src="../js/main.js"></script>
</body>
</html> 